<template>
  <el-container class="setting-center_mall-info-setting_bunk-info">
    <el-main>
      <el-card shadow="never" class="bunk-info-info-container">
        <div class="bunk-info-container">
          <div class="left-container">
            <vxe-toolbar>
              <template v-slot:buttons>
                <vxe-button class="tool-btn" type="info" size="small" icon="el-icon-plus" @click="openGroupClassModal">添加分组</vxe-button>
              </template>
            </vxe-toolbar>
            <el-card shadow="never" class="bunk-info-list-card">
              <el-tree
                ref="treeList"
                :data="treeList"
                :props="defaultProps"
                highlight-current
                :check-on-click-node="false"
                :expand-on-click-node="false"
                default-expand-all
                node-key="id"
                :current-node-key="currentNodekey"
                @node-click="handleNodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <span v-show="data.fixed === 0" style="display: flex;">
                    <el-dropdown trigger="click" @command="openGroupClassModal">
                      <span class="el-dropdown-link"><i class="iconfont icon-gengduozhanshi" /></span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">修改名称</el-dropdown-item>
                        <el-dropdown-item :disabled="data.qrcodeNum != 0" command="2">删除分组</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </span>
              </el-tree>
            </el-card>
          </div>
          <div class="right-container">
            <el-card shadow="never" class="selectCard searchColumn">
              <el-form label-position="right" label-width="6rem">
                <el-row :gutter="40">
                  <el-col :span="8">
                    <el-form-item label="名称：">
                      <el-input v-model="searchParams.name" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" style="float: right;">
                    <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getGroupQrcodeList1" />
                  </el-col>
                </el-row>

              </el-form>
            </el-card>
            <el-card shadow="never" class="commercia-tenant-list-title tableCard">
              <vxe-toolbar>
                <template v-slot:buttons>
                  <el-button type="primary" size="small" icon="el-icon-plus" @click="openQrcodeModal('')">创建</el-button>
                </template>
                <template v-slot:tools>
                  <vxe-button class="tool-btn" type="text" size="small" icon="el-icon-refresh" @click="getGroupQrcodeList1()">刷新</vxe-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                ref="xTree"
                border
                stripe
                resizable
                highlight-hover-row
                :loading="loading"
                :auto-resize="true"
                :data="qrcodeList"
                height="425"
                :print-config="{}"
                header-align="center"
              >
                <vxe-table-column type="seq" width="50" align="center" title=" " />
                <vxe-table-column field="name" title="二维码" min-width="120" />
                <vxe-table-column field="name" title="名称" min-width="120" />
                <vxe-table-column field="groupList" title="当前群" min-width="160" />
                <vxe-table-column field="createTime" title="创建时间" min-width="120" />
                <vxe-table-column title="操作" fixed="right" width="150" align="center" slots="default">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="openModal(scope.row.id)">详情</el-button>
                    <el-button type="text" size="mini" @click="openQrcodeModal(scope.row.id)">修改</el-button>
                    <el-button type="text" size="mini" @click="openModal(scope.row.id)">删除</el-button>
                    <el-button type="text" size="mini" @click="openModal(scope.row.id)">下载</el-button>
                  </template>
                </vxe-table-column>
              </vxe-table>
              <vxe-pager
                :current-page.sync="pageNum"
                :page-size.sync="pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getGroupQrcodeList"
              />
            </el-card>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-dialog width="30%" title="分组信息" :visible.sync="dialogGroupClassVisible" :close-on-click-modal="false">
      <el-form ref="groupClassForm" :model="groupClassParams" :rules="groupClassrules" label-width="8rem">
        <el-row :gutter="40">
          <el-col :span="23">
            <el-form-item label="分组名称：">
              <el-input v-model="groupClassParams.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogGroupClassVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submitGroupClass">确定</el-button>
      </div>
    </el-dialog>
    <group-live-qrcode-edit ref="groupLiveQrcodeEdit" :qrcode-id="selectQrcodeId" :class-id="selectClassId" @refresh="getGroupQrcodeList()" />
  </el-container>
</template>

<script>
import { getGroupQrcodeClassTreeList, delGroupQrcodeClass, addGroupQrcodeClass, modifyGroupQrcodeClass, viewGroupQrcodeClass,
  getGroupQrcodePageList } from '@/api/cop/groupQrcode'
import SearchButton from '@/components/SearchButton'
import groupLiveQrcodeEdit from './components/groupLiveQrcodeEdit'
export default {
  components: {
    SearchButton,
    groupLiveQrcodeEdit
  },
  data() {
    return {
      currentNodekey: '1',
      searchParams: {
        classId: '',
        name: ''
      },
      loading: false,
      qrcodeList: [],
      treeList: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      props: {
        children: 'children',
        value: 'id',
        label: 'name',
        root: 'root',
        fixed: 'fixed',
        emitPath: false
      },
      groupClassParams: {},
      dialogGroupClassVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        root: 'root',
        fixed: 'fixed'
      },
      selectQrcodeId: '',
      selectClassId: '',
      groupClassOperType: 1,
      groupClassrules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    refreshParams(params) {
      params.classId = this.searchParams.classId
      this.searchParams = params
      this.getGroupQrcodeList()
    },
    getGroupQrcodeList1() {
      this.pageNum = 1
      this.getGroupQrcodeList()
    },
    openQrcodeModal(id) {
      if (id) {
        this.selectQrcodeId = id
        this.selectClassId = ''
        setTimeout(() => {
          this.$refs.groupLiveQrcodeEdit.init()
        })
      } else {
        const currentNode = this.$refs.treeList.getCurrentNode()
        if (currentNode.root !== 1) {
          this.selectClassId = currentNode.id
        }
        this.selectQrcodeId = ''
        setTimeout(() => {
          this.$refs.groupLiveQrcodeEdit.init()
        })
      }
    },
    handleNodeClick(data) {
      this.searchParams = {}
      if (data.root === 1) {
        this.searchParams.classId = ''
      } else {
        this.searchParams.classId = data.id
      }
      this.pageNum = 1
      this.getGroupQrcodeList()
    },
    getGroupQrcodeList() {
      getGroupQrcodePageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams
      }).then(response => {
        this.qrcodeList = JSON.parse(JSON.stringify(response.records))
        this.total = response.total
      })
    },
    getTreeList() {
      getGroupQrcodeClassTreeList({ parentId: '0' })
        .then(res => {
          if (res) {
            this.treeList = res
            this.$nextTick(() => {
              this.getGroupQrcodeList()
            })
          }
        }).catch((err) => {
          console.log(err)
        })
    },
    openGroupClassModal(command) {
      const currentNode = this.$refs.treeList.getCurrentNode()

      if (command === '1') {
        this.dialogGroupClassVisible = true
        this.groupClassOperType = 2

        viewGroupQrcodeClass({ id: currentNode.id })
          .then(response => {
            if (response) {
              this.groupClassParams = response
            }
          })
      } else if (command === '2') {
        this.delGroupClass(currentNode.id)
      } else {
        this.dialogGroupClassVisible = true
        this.groupClassOperType = 1
        this.groupClassParams = {}
        if (currentNode.root === 1) {
          this.groupClassParams.parentId = currentNode.id
        } else {
          this.groupClassParams.parentId = currentNode.parentId
        }
      }
    },
    delGroupClass(id) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroupQrcodeClass({ id }).then(response => {
          this.$message.success('删除成功')
          this.getTreeList()
        })
      })
    },
    submitGroupClass() {
      this.$refs.groupClassForm.validate((valid) => {
        if (valid) {
          if (this.groupClassOperType === 1) {
            addGroupQrcodeClass(this.groupClassParams).then(response => {
              this.$message.success('添加成功')
              this.dialogGroupClassVisible = false
              this.getTreeList()
            })
          } else {
            modifyGroupQrcodeClass(this.groupClassParams).then(response => {
              this.$message.success('修改成功')
              this.dialogGroupClassVisible = false
              this.getTreeList()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-info-setting_bunk-info {
  .bunk-info-info-container {
    width: 100%;
  }

  .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
  .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 2px;
    }
  .bunk-info-container {
    display: flex;
    .left-container {
      margin-right: 20px;
      .bunk-info-list-card {
        height: 510px;
        overflow-y: auto;
        width: 300px;
      }
    }
    .right-container {
      width: calc(100% - 320px);
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        .el-card__body {
          padding:  0;
        }
      }
    }
    .logoImg {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
